<template>

  <el-row>
      姓名：{{info.name}}
      <el-input v-model="info.name" placeholder="请输入姓名"></el-input> 
       年龄：{{info.age}}
      <el-input v-model="info.age" placeholder="请输入年龄"></el-input> 
       性别：{{info.sex}} 
       <el-select v-model="info.sex" placeholder = "请选择">
           <el-option v-for="item in option" :key = "item" :value = "item">

           </el-option>
       </el-select>
    <el-button type="success" @click="create">{}</el-button>
    <el-table :data="tabledata" align="left">
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="sex" label="性别"> </el-table-column>
      <el-table-column label="操作">
           <template slot-scope="a">
               <el-button size="mini" type="danger" @click="del(a.$index)"> 删除 </el-button>
           </template>  
      </el-table-column>
    </el-table>
    <el-button >{{name}}</el-button>
    <el-button   type="success"  @click="getComD">获取同级组件的参数</el-button>{{getd}}
  </el-row>
   
</template>

<script>
import Bus from "../assets/Bus.js";
export default{
    name:"btn",
    props:['name'],
    data(){
        return {
            info:{
                name:"",
                age:null,
                sex:""
            },
            option:[
                "女","男","保密"
            ],
            tabledata:[
                {name: 'Leo', age: 12, sex: 'man'},
                {name: 'Lei', age: 22, sex: 'women'},
                {name: 'Lii', age: 65, sex: 'men'}
            ],
            getd:''
        }
    },
    methods:{
        create(){
            debugger
            // sessionStorage.setItem("info",JSON.stringify(this.info))
            // localStorage.setItem("info1",JSON.stringify(this.info))
            this.tabledata.push(this.info)
            this.info = {name:'',age:null,sex:''} 
        },
        del(index){
            // console.log(JSON.parse(sessionStorage.getItem("info")))
            // console.log(JSON.parse(localStorage.getItem("info1")))
            // sessionStorage.removeItem("info")
            // localStorage.removeItem("info1")
            
            // pTc是在父组件on监听的方法
            // 第二个参数{ name:'父 -》 子'}是需要传的值
            this.tabledata.splice(index,1);
            this.$emit('pTc',{
                name:'父 -》 子'
            })
        },
        getComD: function () {
            // 用$on事件来接收参数
            // 监听当前实例上的自定义事件
            Bus.$on('val',function(data){
                this.getd = data;
                console.log(data)
            })
        }
    },
    watch:{
        
    }
}
</script>
<style>

</style>